<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频详情 - 影享圈</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #000;
            color: white;
            height: 100vh;
            padding-top: 44px; /* Status bar height */
        }
        .bg-netflix {
            background-color: #E50914;
        }
        .text-netflix {
            color: #E50914;
        }
        .hero-gradient {
            background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 200px;
            z-index: 10;
        }
        .section-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 12px;
        }
        .cast-scroll {
            display: flex;
            overflow-x: auto;
            gap: 16px;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding-bottom: 10px;
        }
        .cast-scroll::-webkit-scrollbar {
            display: none;
        }
        .episode-item {
            border-bottom: 1px solid #333;
            padding: 12px 0;
        }
        .episode-item:last-child {
            border-bottom: none;
        }
        .comment-item {
            border-bottom: 1px solid #333;
            padding: 16px 0;
        }
        .comment-item:last-child {
            border-bottom: none;
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.9);
            height: 83px;
            border-top: 1px solid #333;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-bottom: env(safe-area-inset-bottom);
        }
        .bottom-nav a {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            font-size: 10px;
            text-decoration: none;
        }
        .bottom-nav a i {
            font-size: 22px;
            margin-bottom: 4px;
        }
        .bottom-nav a.active {
            color: white;
        }
    </style>
</head>
<body>
    <div class="relative min-h-screen pb-20">
        <!-- 顶部导航 -->
        <div class="fixed top-0 left-0 right-0 z-50 px-4 pt-12 pb-2 flex items-center justify-between bg-black bg-opacity-70">
            <button onclick="window.history.back()">
                <i class="fas fa-chevron-left text-white text-xl"></i>
            </button>
            <div class="flex items-center space-x-4">
                <a href="#"><i class="fas fa-share-alt text-white text-xl"></i></a>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="pb-24">
            <!-- 视频封面 -->
            <div class="relative h-[350px]">
                <img src="https://images.unsplash.com/photo-1626814026160-2237a95fc5a0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="流浪地球2" class="w-full h-full object-cover">
                <div class="hero-gradient"></div>
                <div class="absolute bottom-0 left-0 right-0 p-6 z-20">
                    <div class="flex items-center mb-2">
                        <span class="text-netflix font-bold mr-2">影享圈原创</span>
                        <span class="text-sm text-white border border-gray-300 px-1 rounded">9.8</span>
                    </div>
                    <h1 class="text-3xl font-bold mb-2">流浪地球2</h1>
                    <div class="flex text-sm text-gray-300 mb-2">
                        <span class="mr-2">2023</span>
                        <span class="mr-2">•</span>
                        <span class="mr-2">科幻</span>
                        <span class="mr-2">•</span>
                        <span>173分钟</span>
                    </div>
                    <div class="flex space-x-3 mb-4">
                        <button class="bg-white text-black py-2 px-6 rounded-md font-bold flex items-center justify-center">
                            <i class="fas fa-play mr-2"></i> 播放
                        </button>
                        <button class="bg-gray-700 bg-opacity-60 text-white py-2 px-3 rounded-md font-bold flex items-center justify-center">
                            <i class="fas fa-plus mr-1"></i> 收藏
                        </button>
                        <button class="bg-gray-700 bg-opacity-60 text-white py-2 px-3 rounded-md font-bold flex items-center justify-center">
                            <i class="fas fa-download mr-1"></i> 下载
                        </button>
                    </div>
                </div>
            </div>

            <!-- 影片详情 -->
            <div class="px-4 mt-4">
                <p class="text-sm text-gray-300 mb-6">
                    太阳即将毁灭，人类在地球表面建造出巨大的推进器，寻找新家园。然而宇宙之路危机四伏，为了拯救地球，流浪地球时代的年轻人再次挺身而出，展开争分夺秒的生命之战。本片为刘慈欣同名小说改编，延续前作宏大场景与震撼特效，讲述更加宏大的太空史诗。
                </p>

                <!-- 演职人员 -->
                <h2 class="section-title">演职人员</h2>
                <div class="cast-scroll">
                    <div class="flex-shrink-0 w-16 text-center">
                        <div class="w-16 h-16 rounded-full overflow-hidden mx-auto mb-2">
                            <img src="https://randomuser.me/api/portraits/men/86.jpg" alt="吴京" class="w-full h-full object-cover">
                        </div>
                        <p class="text-xs">吴京</p>
                        <p class="text-xs text-gray-500">主演</p>
                    </div>
                    <div class="flex-shrink-0 w-16 text-center">
                        <div class="w-16 h-16 rounded-full overflow-hidden mx-auto mb-2">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="刘德华" class="w-full h-full object-cover">
                        </div>
                        <p class="text-xs">刘德华</p>
                        <p class="text-xs text-gray-500">主演</p>
                    </div>
                    <div class="flex-shrink-0 w-16 text-center">
                        <div class="w-16 h-16 rounded-full overflow-hidden mx-auto mb-2">
                            <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="宁静" class="w-full h-full object-cover">
                        </div>
                        <p class="text-xs">宁静</p>
                        <p class="text-xs text-gray-500">主演</p>
                    </div>
                    <div class="flex-shrink-0 w-16 text-center">
                        <div class="w-16 h-16 rounded-full overflow-hidden mx-auto mb-2">
                            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="郭帆" class="w-full h-full object-cover">
                        </div>
                        <p class="text-xs">郭帆</p>
                        <p class="text-xs text-gray-500">导演</p>
                    </div>
                    <div class="flex-shrink-0 w-16 text-center">
                        <div class="w-16 h-16 rounded-full overflow-hidden mx-auto mb-2">
                            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="刘慈欣" class="w-full h-full object-cover">
                        </div>
                        <p class="text-xs">刘慈欣</p>
                        <p class="text-xs text-gray-500">原著</p>
                    </div>
                </div>

                <!-- 精彩预告片 -->
                <div class="mt-8">
                    <h2 class="section-title">精彩预告片</h2>
                    <div class="space-y-4">
                        <div class="relative rounded-lg overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1612036782180-6f0b6cd846fe?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="预告片" class="w-full h-48 object-cover">
                            <div class="absolute inset-0 flex items-center justify-center">
                                <div class="w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
                                    <i class="fas fa-play text-white text-xl"></i>
                                </div>
                            </div>
                            <div class="absolute bottom-2 left-4">
                                <p class="text-sm font-medium">官方预告片</p>
                                <p class="text-xs text-gray-300">02:45</p>
                            </div>
                        </div>
                        <div class="relative rounded-lg overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1518930259200-3e5b29f42096?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1267&q=80" alt="幕后花絮" class="w-full h-48 object-cover">
                            <div class="absolute inset-0 flex items-center justify-center">
                                <div class="w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
                                    <i class="fas fa-play text-white text-xl"></i>
                                </div>
                            </div>
                            <div class="absolute bottom-2 left-4">
                                <p class="text-sm font-medium">幕后花絮</p>
                                <p class="text-xs text-gray-300">05:17</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 社区评论 -->
                <div class="mt-8">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="section-title">社区评论</h2>
                        <button class="text-netflix text-sm">写评论</button>
                    </div>
                    <div class="space-y-0">
                        <div class="comment-item">
                            <div class="flex">
                                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="小红" class="w-10 h-10 rounded-full mr-3">
                                <div class="flex-1">
                                    <div class="flex justify-between items-center mb-1">
                                        <div>
                                            <span class="font-medium">小红</span>
                                            <span class="text-xs text-gray-400 ml-2">2天前</span>
                                        </div>
                                        <div class="flex items-center">
                                            <span class="text-yellow-400 mr-1">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star-half-alt"></i>
                                            </span>
                                            <span class="text-sm">9.5</span>
                                        </div>
                                    </div>
                                    <p class="text-sm mb-2">这部电影太震撼了！特效做得非常棒，剧情也很紧凑，是今年最值得一看的科幻电影，没有之一。吴京的演技也进步很大，期待第三部！</p>
                                    <div class="flex text-sm text-gray-400">
                                        <button class="flex items-center mr-4">
                                            <i class="far fa-thumbs-up mr-1"></i>
                                            <span>128</span>
                                        </button>
                                        <button class="flex items-center">
                                            <i class="far fa-comment mr-1"></i>
                                            <span>回复</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment-item">
                            <div class="flex">
                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="阿明" class="w-10 h-10 rounded-full mr-3">
                                <div class="flex-1">
                                    <div class="flex justify-between items-center mb-1">
                                        <div>
                                            <span class="font-medium">阿明</span>
                                            <span class="text-xs text-gray-400 ml-2">3天前</span>
                                        </div>
                                        <div class="flex items-center">
                                            <span class="text-yellow-400 mr-1">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="far fa-star"></i>
                                            </span>
                                            <span class="text-sm">8.0</span>
                                        </div>
                                    </div>
                                    <p class="text-sm mb-2">作为硬科幻爱好者，这部电影有些地方的科学设定还是不够严谨，但瑕不掩瑜，整体上是一部非常优秀的国产科幻电影。希望中国科幻电影能越来越好！</p>
                                    <div class="flex text-sm text-gray-400">
                                        <button class="flex items-center mr-4">
                                            <i class="far fa-thumbs-up mr-1"></i>
                                            <span>82</span>
                                        </button>
                                        <button class="flex items-center">
                                            <i class="far fa-comment mr-1"></i>
                                            <span>回复</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment-item">
                            <div class="flex">
                                <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="小美" class="w-10 h-10 rounded-full mr-3">
                                <div class="flex-1">
                                    <div class="flex justify-between items-center mb-1">
                                        <div>
                                            <span class="font-medium">小美</span>
                                            <span class="text-xs text-gray-400 ml-2">1周前</span>
                                        </div>
                                        <div class="flex items-center">
                                            <span class="text-yellow-400 mr-1">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </span>
                                            <span class="text-sm">10.0</span>
                                        </div>
                                    </div>
                                    <p class="text-sm mb-2">比第一部更好看！情感戏份处理得很到位，让人看哭好几次。刘德华的加入让整部电影质感提升不少，希望能有第三部！强烈推荐所有人都去看！</p>
                                    <div class="flex text-sm text-gray-400">
                                        <button class="flex items-center mr-4">
                                            <i class="far fa-thumbs-up mr-1"></i>
                                            <span>256</span>
                                        </button>
                                        <button class="flex items-center">
                                            <i class="far fa-comment mr-1"></i>
                                            <span>回复</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-center mt-4">
                        <button class="text-netflix text-sm">查看全部762条评论</button>
                    </div>
                </div>

                <!-- 猜你喜欢 -->
                <div class="mt-8 mb-10">
                    <h2 class="section-title">猜你喜欢</h2>
                    <div class="grid grid-cols-3 gap-3">
                        <div>
                            <div class="rounded overflow-hidden">
                                <img src="https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1025&q=80" alt="三体" class="w-full aspect-[2/3] object-cover">
                            </div>
                            <p class="text-xs mt-1 truncate">三体</p>
                        </div>
                        <div>
                            <div class="rounded overflow-hidden">
                                <img src="https://images.unsplash.com/photo-1635805737707-575885ab0820?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="星际穿越" class="w-full aspect-[2/3] object-cover">
                            </div>
                            <p class="text-xs mt-1 truncate">星际穿越</p>
                        </div>
                        <div>
                            <div class="rounded overflow-hidden">
                                <img src="https://images.unsplash.com/photo-1518930259200-3e5b29f42096?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1267&q=80" alt="流浪地球" class="w-full aspect-[2/3] object-cover">
                            </div>
                            <p class="text-xs mt-1 truncate">流浪地球</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <div class="bottom-nav">
            <a href="#">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="#">
                <i class="fas fa-compass"></i>
                <span>探索</span>
            </a>
            <a href="#">
                <i class="fas fa-users"></i>
                <span>社交</span>
            </a>
            <a href="#">
                <i class="fas fa-download"></i>
                <span>下载</span>
            </a>
            <a href="#">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </div>
    </div>
</body>
</html>
